/*
 * @Author: xiaosihan 
 * @Date: 2024-01-07 01:37:49 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-01-07 05:09:56
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./noviceTip.module.less";
import { Tour, TourProps } from "antd";
import noviceTipStore from "./noviceTipStore";

interface Iprops {
  children?: ReactNode
}

// 新手提示
export default function NoviceTip(props: Iprops) {

  const ref1 = useRef<HTMLDivElement>(null);
  const ref2 = useRef<HTMLDivElement>(null);
  const ref3 = useRef<HTMLDivElement>(null);

  const dom = useRef<HTMLDivElement | null>(null);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setOpen(!Boolean(localStorage.noviceTip));
    }, 1000);
  }, []);

  useEffect(() => autorun(() => {

  }), []);

  const steps: TourProps['steps'] = [
    {
      title: '第一步:选择商品',
      description: '选择一款商品进行设计',
      placement: "right",
      target: () => ref1.current!,
      nextButtonProps: {
        style: {
          background: "linear-gradient(143deg, #F10505 0%, #FF9E75 100%)"
        }
      },
      prevButtonProps: {
        style: {
          backgroundColor: "#f8e8e2",
          color: "#F10505",
          border: "none"
        }
      }
    },
    {
      title: '第二步:开始设计',
      description: '选择图片开始设计市场热销商品',
      placement: "right",
      target: () => ref2.current!,
      nextButtonProps: {
        style: {
          background: "linear-gradient(143deg, #F10505 0%, #FF9E75 100%)"
        }
      },
      prevButtonProps: {
        style: {
          backgroundColor: "#f8e8e2",
          color: "#F10505",
          border: "none"
        }
      },
    },
    {
      title: '第三步:保存并加入购物车',
      description: '设计完成后保存加入购物车,前往购物车结算下单',
      target: () => ref3.current!,
      nextButtonProps: {
        style: {
          background: "linear-gradient(143deg, #F10505 0%, #FF9E75 100%)"
        }
      },
      prevButtonProps: {
        style: {
          backgroundColor: "#f8e8e2",
          color: "#F10505",
          border: "none"
        }
      },
    }
  ]

  return (
    <div className={styles.noviceTip} >

      <div ref={ref1} className={styles.step1} ></div>
      <div ref={ref2} className={styles.step2} ></div>
      <div ref={ref3} className={styles.step3} ></div>

      <Tour
        open={open}
        onClose={() => {
          localStorage.noviceTip = true;
          setOpen(false)
        }}
        steps={steps}
        indicatorsRender={(current, total) => {
          noviceTipStore.setTab(current);
          return (
            <span>
              {current + 1} / {total}
            </span>
          );
        }}
      />
    </div>
  );

}